import React, { Component } from 'react';
import DetailStyleComp from './DetailStyleComp.js'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { actionCreators } from './store'
import Banner from './banner'
import ShowAction from '../../components/ShowActionSheet'
import Foot from './Foot'

class Details extends Component {
    constructor(props) {
        super(props);
        this.state = {
            location:null,
            list:{},
            info:{},
            discount:{},
            foodsFlag:false,
        };
    }

    change = () => {
        this.props.banner(this.state.location)
        this.setState({
            foodsFlag:!this.state.foodsFlag
        })
    }
    render() {
        const {info} = this.state
        const {discount} = this.state
        return (
            <DetailStyleComp  >
                {this.props.details && <Banner list = {this.props.details}/>}
                <div style = {{backgroundColor:'#eee',width:'6.95rem',margin:'0 auto'}}>
                    <div style = {{ backgroundColor:'white' }}>
                        <div style = {{display:'flex',height:'.71rem',lineHeight:'.71rem',justifyContent:'space-Between'}}>
                            <p>
                                <span style = {{color:'red'}}>￥</span>
                                <span style = {{fontSize:'.53rem',color:'red'}}>{info.fprice}</span>
                                <s style = {{paddingLeft:'.5rem'}}>￥{info.oprice}</s>
                                <span style = {{fontSize:'.213rem',backgroundColor:'rgb(255, 70, 78)',color:'white'}}>包邮</span>
                            </p>
                            <p>
                                {info.join_number}
                            </p>
                        </div>
                        <div style = {{fontSize:'.24rem',color:'red',width:'6.95rem',height:'.48rem',lineHeight:'.48rem'}}>{info.goods_dis}</div>
                        <div style = {{display:'flex',justifyContent:'space-Between',width:'6.95rem',height:'.48rem',lineHeight:'.48rem'}}>
                            <p>{info.goods_title}</p>
                            <span style = {{color:'red'}} className = "fa fa-heartbeat"></span>
                        </div>
                    </div>
                    <div style = {{backgroundColor:'white',marginTop:'.2rem'}} >
                        <p style = {{height:'.96rem',fontSize:'.256rem',lineHeight:'.96rem',display:'flex',justifyContent:'space-Between'}} >
                            <span>
                                <span style = {{fontSize:'.213rem',backgroundColor:'rgb(255, 70, 78)',color:'white'}}>
                                    {discount && discount.title}
                                </span>
                                <span>
                                    { discount && discount.content}
                                </span>
                            </span>
                            <span>
                                <img style = {{width:'.48rem',height:'.48rem'}} alt = "" src = "https://web.juanpi.com/static/media/more.66830346.png" />
                            </span>
                        </p>
                        <p style = {{display:'flex',justifyContent:'space-Between',fontSize:'.256rem',height:'.96rem',lineHeight:'.96rem'}} >
                            <span>
                                <span><span style = {{color:'red',fontSize:'.512rem'}} >·</span>24小时发货</span>
                                <span><span style = {{color:'red',fontSize:'.512rem'}}>·</span>7天包退</span>
                                <span><span style = {{color:'red',fontSize:'.512rem'}}>·</span>售后补贴</span>
                            </span>
                            <span>
                                <img style = {{width:'.48rem',height:'.48rem'}} alt = "" src = "https://web.juanpi.com/static/media/more.66830346.png" />
                            </span>
                        </p>
                    </div>
                    <div onClick={this.change} style = {{height:'.96rem',backgroundColor:'white',marginTop:'.2rem'}}>
                        <div style = {{height:'.96rem',display:'flex',justifyContent:'space-Between'}} >
                            <p style = {{height:'.96rem',lineHeight:'.96rem'}}>
                                请选择：颜色  尺码  数量
                            </p>
                            <img style = {{ display:'block',width:'.48rem',height:'.48rem',marginTop:'.2rem'}} alt="" src="https://web.juanpi.com/static/media/arrow_right.ddbb0258.png" />
                        </div>
                    </div>
                </div>
                { <Foot onchange = {this.change} initype={this.showaction && this.showaction.showType} />}
                {this.state.foodsFlag && <ShowAction onchange = {this.change} ref={el => this.showaction = el }  foodsdata={this.props.details} />}
            
            </DetailStyleComp>
        );
    }

    componentDidMount () {
        this.setState({
            location:this.props.location
        })
        this.props.banner(this.props.location)
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.details[0]){
            this.setState({
                info:nextProps.details[0].info,
                list:nextProps.details[0].sku,
                discount:nextProps.details[1] && nextProps.details[1].coupon[0]
            })
        }
    }

}

export default connect(
    newState => newState.details,
    dispatch => bindActionCreators( actionCreators,dispatch )
)(Details);